<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:项目笔记</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h1 id="-bi-">智能BI平台</h1>
<h2 id="-">项目介绍</h2>
<ul>
<li>基本信息：</li>
</ul>
<p>​        基于 React + Spring Boot + MQ + AIGC 的智能数据分析平台。
​        区别于传统 BI，用户只需要导入原始数据集、并输入分析诉求，就能自动生成可视化图表及分析结论，实现数据分析的降本增效。</p>
<ul>
<li>项目地址：</li>
<li>git地址：</li>
</ul>
<h2 id="-">快速入门</h2>
<ol>
<li><p>在智能分析界面，输入你的分析目标，想要生成的图表名称，图表类型，还有原始数据。</p>
<p>要注意的是图表名称不能和之前生成过的图表重复。</p>
<p>同时，单击下方转换输入方式可以通过上传文件方式进行数据的上传。</p>
<p><img src="项目笔记.assets/image-20230831173914288.png" alt="image-20230831173914288"></p>
</li>
</ol>
<p>文件数据的格式必须如下：</p>
<ul>
<li>excel文件：</li>
</ul>
<p><img src="项目笔记.assets/image-20230831174344933.png" alt="image-20230831174344933"></p>
<ul>
<li>CSV：</li>
</ul>
<p>每一列用回车换行表示，每一行之间数据用英文逗号（&#39;<code>,</code>&#39;）分开，每行的最后一个元素没有逗号</p>
<pre><code>日期,用户数
string,number
1号,10
2号,20
3号,30
4号,90
5号,0
6号,10
7号,20
</code></pre><h3 id="-">同步化分析</h3>
<blockquote>
<p>在第一个智能分析界面，只需要在原界面进行等待，结果会在右边进行展示</p>
</blockquote>
<p><strong>加载中：</strong></p>
<p><img src="项目笔记.assets/image-20230831174805054.png" alt="image-20230831174805054"></p>
<p><strong>分析成功：</strong></p>
<p><img src="项目笔记.assets/image-20230831174830246.png" alt="image-20230831174830246"></p>
<h3 id="-">异步化分析</h3>
<blockquote>
<p>在第二个智能分析界面中，我们可以多次上传不同的图表进行分析，一个分析项目上传完之后其会在后台帮助你进行分析，之后你可上传别的项目分析。之后来到我的图表界面即可看到分析结果。</p>
</blockquote>
<p><strong>上传成功：</strong></p>
<p><img src="项目笔记.assets/image-20230831175058691.png" alt="image-20230831175058691"></p>
<p><strong>分析中：</strong></p>
<p><img src="项目笔记.assets/image-20230831175134022.png" alt="image-20230831175134022"></p>
<p><strong>分析成功：</strong></p>
<p><img src="项目笔记.assets/image-20230831175152684.png" alt="image-20230831175152684"></p>
<h3 id="-">分析详情界面</h3>
<p><img src="项目笔记.assets/image-20230831175309358.png" alt="image-20230831175309358"></p>
<p>点击查看图表详情可以查看具体可视化图表，点击右上角详细数据可以查看原始数据。</p>
<p>开始你的智能分析吧！</p>
<p>下面是技术内容~</p>
<hr>
<h2 id="-">技术选型</h2>
<ul>
<li>前端：<ul>
<li>React 18</li>
<li>Ant Design Pro 5.x 脚手架</li>
<li>Umi 4 前端框架</li>
<li>Ant Design 组件库</li>
<li>Echarts 可视化库</li>
<li>OpenAPI 前端代码生成</li>
</ul>
</li>
</ul>
<ul>
<li><p>后端 </p>
<ul>
<li><p>Java Spring Boot（万用后端模板）</p>
</li>
<li><p>MySQL 数据库</p>
</li>
<li><p>MyBatis-Plus 及 MyBatis X 自动生成</p>
</li>
<li><p>Redis + Redisson 限流</p>
</li>
<li><p>RabbitMQ 消息队列</p>
</li>
<li><p>鱼聪明 AI SDK（AI 能力）</p>
</li>
<li><p>JDK 线程池及异步化</p>
</li>
<li><p>Easy Excel 表格数据处理</p>
</li>
<li><p>Swagger + Knife4j 接口文档生成</p>
</li>
<li><p>Hutool、Apache Common Utils 等工具库</p>
</li>
</ul>
</li>
</ul>
<h2 id="-">应用场景</h2>
<ol>
<li>支持传入excel表格或直接输入 csv 结构语句，并输入分析目标；即可通过 ai 自动生成对于数据的分析，实现了智能化的BI分析。</li>
<li>支持将传入的数据以图表形式进行可视化展示，同时支持自定义多种图表类型的生成。</li>
<li>分析后的数据保存在我的图表中，以持久化的形式保存在数据库，可以多次反复查看。</li>
</ol>
<h2 id="-">系统设计</h2>
<ol>
<li><p>传统BI平台业务流程</p>
</li>
<li><p>上传数据</p>
</li>
<li>自定义运用低代码平台人工对于商业数据进行分析</li>
<li><p>得出结论，生成图标并保存。</p>
</li>
<li><p>智能BI平台业务流程</p>
</li>
<li><p>用户输入最原始的数据</p>
</li>
<li>只需要填写自身的分析目标</li>
<li>运用 ai 自动生成图表结论</li>
</ol>
<p>最原始的项目结构：</p>
<p><img src="项目笔记.assets/image-20230822153045007.png" alt="image-20230822153045007"></p>
<p>但是考虑到业务的特殊性，AI服务需要调用第三方接口，并且对于数据生成需要时间。所以当用户访问量变大的时候，那么就会影响到用户的访问体验感。那么这个时候，我们就可以运用<strong>消息队列</strong>技术，可以尽可能避免同时处理大量请求产生的压力，同时也能更好的控制资源的使用。</p>
<hr>
<p>那么，我们就来到了运用消息队列进行业务异步化流程的改造。</p>
<p>任务处理模块调用 AI 服务处理客户端数据，AI 服务异步生成结果返回给后端并保存到数据库，当后端的 AI 服务生成完毕后，可以通过向前端发送通知的方式，或者通过业务后端监控数据库中图表生成服务的状态，来确定生成结果是否可用。若生成结果可用，前端即可获取并处理相应的数据，最终将结果返回给客户端展示。</p>
<p>异步化流程优化：</p>
<p><img src="项目笔记.assets/image-20230822153120389.png" alt="image-20230822153120389"></p>
<h2 id="-">系统亮点</h2>
<ol>
<li>图表数据分表存储，提高了查询的灵活性和性能。</li>
<li>由于 AIGC 的响应时间较长，基于自定义 IO 密集型线程池 + 任务队列实现了 AIGC 的并发执行和异步化，提交任务后即可响应前端，提高用户体验。</li>
<li>由于本地任务队列重启丢失数据，使用 RabbitMQ（分布式消息队列）来接受并持久化任务消息，通过 Direct 交换机转发给解耦的 AI 生成模块消费并处理任务，提高了系统的可靠性。</li>
<li>运用 AI 实现分析的智能化，同时通过对AI模型进行上下文训练和输入输出格式的限制，提升了输出结果的准确度。</li>
<li>运用线程池中的 Guava Retrying 重试机制，提升了系统的健壮性。</li>
<li>运用死信队列和spring定时任务的结合，实现对于失败任务的定时批量重试，提升了分析的可靠性和用户的体验感。</li>
<li>为防止某用户恶意占用系统资源，基于 Redisson 的 RateLimiter 实现分布式限流，控制单用户访问的频率。</li>
</ol>
<h2 id="-">项目总结和反思</h2>
<h3 id="-">总结</h3>
<p>​    通过这个项目，让我对于异步化流程的实现有了一个更加深刻的理解。能够运用线程池和消息队列两种技术分别对于异步任务做出处理，并且能够掌握其处理失败的情况和应对措施。同时对于可能会产生的大批量请求，学习了运用 Redission 的 RateLimiter 进行分布式限流。同时跟随着时代的潮流，对于AI如何高效提问有了一个新的认知和实践。总体上是一个让我收获颇丰的项目。</p>
<h3 id="-">反思</h3>
<p>但是这个项目仍有一些不足之处以及优化点：</p>
<ul>
<li>对于异步消息成功的通知，用户需要即时收到（这里可以使用 websocket 等进行实现）</li>
<li>对于数据信息的改动和图表展示方式的改动（这里我不是很明白，感觉需要运用到 JDBC 对于其元数据的读取，因为需要读取列）</li>
<li>反向压力的实现，针对于访问量和生成速度进行同步化或者异步化的转换，提高系统的灵活性。</li>
</ul>

          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>